React的props與state(下)

states 是元件內部狀態
State只能在 Class中使用。State的資料結構就是一個物件JavaScript Object。如果一個資料不會用在 render()中顯示邏輯，這資料不應該被存在 State。
執行constructor時，他會掃描過一遍有沒有state是沒有在constructor裡，沒有的話，他會給undefined。

1.State在Class的constructor() 中用 this.state 來初始化 State 物件。例:this.state={ 變數名稱A: 初始化值, 變數名稱B: 初始化值,...};
2.在 constructor() 以外的地方，要更新 State 只能透過元件提供的方法 this.setState({ example:15}) 來更新 State。
3.在 constructor() 以外的地方，要將prop的值給state時，要使用this.setState((state, props) => ({ })的方式來給。因為資料可能是非同步更新。
4.setState的第二個參數是個function，當state被設定完之後，就會執行。

Hello.js

import React from "react";

class Hello extends React.Component {
    constructor(props) {
      super(props);
      //初始化state的值
      this.state = {age:this.props.age,name:this.props.name};
      }

      play(event){
      //元件內部自己維護的 State
        this.setState({title: '我的名字是'});
        console.log("title",this.state.title);
        this.play2()
        this.play3();
      }

      play2(event){
        //因為 this.props 和 this.state 為非同步的被更新，它接受一個 function 而不是一個 object。Function 將接收先前的 state 作為第一個參數，並且將更新的 props 作為第二個參數
        this.setState((state, props) => ({      
            counter: 3 + props.age

        }));
        console.log('counter',this.state.counter);
      }

      play3(){
          this.setState({abc:'40'});
          console.log('abc',this.state.abc);
      }
    
      
    render() {
      return (
        <div>
          <button onClick={this.play.bind(this)}>送出</button>
          {console.log('counter',this.state.counter)}
          {console.log('abc',this.state.abc)}
        </div>
      );
    }
  }

  export default Hello;

執行結果:console.log
剛進網頁時
//[HMR] Waiting for update signal from WDS...
//Hello.js:37 counter undefined
//Hello.js:37 abc undefined

按下按鈕後:值都沒有存到state裡面。
this.play();
//title undefined
this.play2();
//counter undefined
this.play3();
//abc undefined

一直到render時，state的值才顯示出來。
//counter 我的名字是
//counter 321
//abc 40